<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="/adminlte/layui/css/layui.css"/>
    <style type="text/css">
        ul{margin-top:5px;}li{margin-top:3px;}.layui-form-switch{margin-top: 0;}#tree1 ul+ul{border-top: 1px dashed #e2e2e2;}
    </style>
</head>
<body>
<h3>物料管理</h3>
<table class="layui-table layui-form" id="tree-tableMaterMan" lay-size="sm"></table>
<div id="add-mainMaterMan" style="display: none;">
    <div class="my-form">
        <form class="layui-form"  lay-skin="line">
            <!--<div class="layui-form-item my-form-item" style="margin-top: 10px">
                <label class="layui-form-label layui-icon" style="width: 120px">&#xe642;父ID:</label>
                <div class="layui-input-inline">
                    <input id="pid" type="text" name="pid" lay-verify="required" placeholder="请输入父ID" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>-->
         <!--   <div class="layui-form-item my-form-item" style="margin-top: 10px">
                <label class="layui-form-label layui-icon" style="width: 120px">层级:</label>
                <div class="layui-input-inline">
                    <input id="title" type="text" name="title" lay-verify="required" placeholder="请输入层级" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>-->
            <div class="layui-form-item my-form-item">
                <label class="layui-form-label layui-icon" style="width: 120px">厂家:</label>
                <div class="layui-input-inline">
                    <input id="factory" type="text" name="factory" lay-verify="required" placeholder="请输入厂家" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item my-form-item">
                <label class="layui-form-label layui-icon" style="width: 120px">类别:</label>
                <div class="layui-input-inline">
                    <input id="materialtype" type="text" name="materialtype" lay-verify="required" placeholder="请输入类别" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item my-form-item">
                <label class="layui-form-label layui-icon" style="width: 120px">名称:</label>
                <div class="layui-input-inline">
                    <input id="materialName" type="text" name="materialName" lay-verify="required" placeholder="请输入名称" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item my-form-item">
                <label class="layui-form-label layui-icon" style="width: 120px">规格:</label>
                <div class="layui-input-inline">
                    <input id="materialSpecification" type="text" name="materialSpecification" lay-verify="required" placeholder="请输入规格" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item my-form-item">
                <label class="layui-form-label layui-icon" style="width: 120px">备注:</label>
                <div class="layui-input-inline">
                    <input id="remarks" type="text" name="remarks" lay-verify="required" placeholder="请输入备注" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>
        </form>
    </div>
</div>
<div id="update-mainMaterMan" style="display: none;">
    <div class="my-form">
        <form class="layui-form"  lay-skin="line">
           <!-- <div class="layui-form-item my-form-item" style="margin-top: 10px">
                <label class="layui-form-label layui-icon" style="width: 120px">父ID:</label>
                <div class="layui-input-inline">
                    <input id="pid" type="text" name="pid" lay-verify="required" placeholder="请输入父ID" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>-->
           <!-- <div class="layui-form-item my-form-item" style="margin-top: 10px">
                <label class="layui-form-label layui-icon" style="width: 120px">层级:</label>
                <div class="layui-input-inline">
                    <input id="titleUpdate" type="text" name="titleUpdate" lay-verify="required" placeholder="请输入层级" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>-->
            <div class="layui-form-item my-form-item">
                <label class="layui-form-label layui-icon" style="width: 120px">厂家:</label>
                <div class="layui-input-inline">
                    <input id="factoryUpdate" type="text" name="factoryUpdate" lay-verify="required" placeholder="请输入厂家" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item my-form-item">
                <label class="layui-form-label layui-icon" style="width: 120px">类别:</label>
                <div class="layui-input-inline">
                    <input id="materialtypeUpdate" type="text" name="materialtypeUpdate" lay-verify="required" placeholder="请输入类别" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item my-form-item">
                <label class="layui-form-label layui-icon" style="width: 120px">名称:</label>
                <div class="layui-input-inline">
                    <input id="materialNameUpdate" type="text" name="materialNameUpdate" lay-verify="required" placeholder="请输入名称" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item my-form-item">
                <label class="layui-form-label layui-icon" style="width: 120px">规格:</label>
                <div class="layui-input-inline">
                    <input id="materialSpecificationUpdate" type="text" name="materialSpecificationUpdate" lay-verify="required" placeholder="请输入规格" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item my-form-item">
                <label class="layui-form-label layui-icon" style="width: 120px">备注:</label>
                <div class="layui-input-inline">
                    <input id="remarksUpdate" type="text" name="remarksUpdate" lay-verify="required" placeholder="请输入备注" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="/adminlte/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: '/adminlte/layui/lay/modules/',
    })
    layui.use(['treeTable','layer','code','form'],function(){
        var o = layui.$,
            form = layui.form,
            layer = layui.layer,
            treeTable = layui.treeTable;
        var	re = treeTable.render({
            elem: '#tree-tableMaterMan',
            url:"/sysMaterialManagement/sysMaterialManagementDate",
            icon_key: 'title',
            end: function(e){
                form.render();
            },
            cols: [
                {
                    key: 'title',
                    title: '层级',
                    width: '250px',
                    template: function(item){
                        if(item.level == 0){
                            return '<span style="color:red;">'+item.title+'</span>';
                        }else if(item.level == 1){
                            return '<span style="color:green;">'+item.title+'</span>';
                        }else if(item.level == 2){
                            return '<span style="color:blue;">'+item.title+'</span>';
                        }else if(item.level == 3){
                            return '<span style="color:#1a2226;">'+item.title+'</span>';
                        }else if(item.level == 4){
                            return '<span style="color:#aaa;">'+item.title+'</span>';
                        }
                    }
                },
                /* {
                     key: 'id',
                     title: 'ID',
                     width: '200px',
                     align: 'center',
                 },
                 {
                     key: 'pid',
                     title: '父ID',
                     width: '200px',
                     align: 'center',
                 },*/
                {
                    key: 'factory',
                    title: '厂家',
                    width: '100px',
                    align: 'center',
                },
                {
                    key: 'materialtype',
                    title: '类别',
                    width: '100px',
                    align: 'center',
                },
                {
                    key: 'materialName',
                    title: '名称',
                    width: '100px',
                    align: 'center',
                },
                {
                    key: 'materialSpecification',
                    title: '规格',
                    width: '100px',
                    align: 'center',
                },
                {
                    key: 'remarks',
                    title: '备注',
                    width: '100px',
                    align: 'center',
                },
                {
                    key: 'operator',
                    title: '操作人',
                    width: '100px',
                    align: 'center',
                },
                {
                    key: 'operatorTime',
                    title: '操作时间',
                    width: '150px',
                    align: 'center',
                },
                {
                    title: '操作',
                    align: 'center',
                    template: function(item){
                        return '<a lay-filter="add">添加</a> | <a lay-filter="edit">编辑</a> | <a lay-filter="delete" style="color: red">删除</a>';
                    }
                }
            ]
        });
        // 监听自定义
        treeTable.on('tree(add)',function(data){
            layer.open({
                type:1,
                title:'添加',
                btnAlign: 'c',
                area: ['400px', '400px'],
                content: $("#add-mainMaterMan"),
                btn:['保存','取消'],
                success:function (layero, index) {
                    /* top.$('#pid').val(data.item.id);*/
                  /*  top.$('#title').val("");*/
                    top.$("#factory").val("");
                    top.$("#materialtype").val("");
                    top.$("#materialName").val("");
                    top.$("#materialSpecification").val("");
                    top.$("#remarks").val("");
                },
                yes:function(index,layero){
                    var title =data.item.title;
                    var factory =top.$("#factory").val();
                    var materialtype =top.$("#materialtype").val();
                    var materialName =top.$("#materialName").val();
                    var materialSpecification =top.$("#materialSpecification").val();
                    var remarks =top.$("#remarks").val();
                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST",//方法类型
                        dataType: "json",//预期服务器返回的数据类型
                        url: "/sysMaterialManagement/addSysMaterial" ,//url
                        data: {title:title,factory:factory,materialtype:materialtype,materialName:materialName,materialSpecification:materialSpecification,remarks:remarks,pid:data.item.id},
                        success: function (result) {
                            console.log(result);//打印服务端返回的数据(调试用)
                            if (result.success >0) {
                                layer.msg('操作成功', {
                                    btnAlign: 'c',
                                    time: 3000, //20s后自动关闭
                                    btn: ['确定']
                                });
                                treeTable.render(re);
                            }else{
                                layer.msg('操作失败', {
                                    btnAlign: 'c',
                                    time: 3000, //20s后自动关闭
                                    btn: ['确定']
                                });
                            }
                        },
                        error : function() {
                            alert("异常！");
                        }
                    });

                    layer.close(index);
                },
                btn2:function (index) {
                    layer.close(index);
                }
            })
        })
        treeTable.on('tree(edit)',function(data){
            layer.open({
                type:1,
                title:'修改',
                btnAlign: 'c',
                area: ['400px', '400px'],
                content: $("#update-mainMaterMan"),
                btn:['保存','取消'],
                success: function (layero, index) {
                   /* top.$('#pid').val(data.item.pid);*/
                   /* top.$('#titleUpdate').val(data.item.title);*/
                    top.$('#factoryUpdate').val(data.item.factory);
                    top.$('#materialtypeUpdate').val(data.item.materialtype);
                    top.$('#materialNameUpdate').val(data.item.materialName);
                    top.$('#materialSpecificationUpdate').val(data.item.materialSpecification);
                    top.$('#remarksUpdate').val(data.item.remarks);
                },
                yes:function(index,layero){
                    var title =data.item.title;
                    var factory =top.$("#factoryUpdate").val();
                    var materialtype =top.$("#materialtypeUpdate").val();
                    var materialName =top.$("#materialNameUpdate").val();
                    var materialSpecification =top.$("#materialSpecificationUpdate").val();
                    var remarks =top.$("#remarksUpdate").val();
                    var pid = data.item.pid;
                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST",//方法类型
                        dataType: "json",//预期服务器返回的数据类型
                        url: "/sysMaterialManagement/updateSysMaterial" ,//url
                        data: {title:title,factory:factory,id:data.item.id,pid:pid,materialtype:materialtype,materialName:materialName,materialSpecification:materialSpecification,remarks:remarks},
                        success: function (result) {
                            if (result.success>0) {
                                layer.msg('操作成功', {
                                    btnAlign: 'c',
                                    time: 3000, //20s后自动关闭
                                    btn: ['确定']
                                });
                                treeTable.render(re);
                            }else{
                                layer.msg('操作失败', {
                                    btnAlign: 'c',
                                    time: 3000, //20s后自动关闭
                                    btn: ['确定']
                                });
                            }
                        },
                        error : function() {
                            alert("异常！");
                        }
                    });

                    layer.close(index);
                },
                btn2:function (index) {
                    layer.close(index);
                }
            })
        });
        treeTable.on('tree(delete)',function(data){
            layer.confirm('确定删除',{btn: ['确定', '取消'], title: "提示"},function(index){
                console.log(data.item.id+"-----"+data.item.pid);
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/sysMaterialManagement/deleteSysMaterial" ,//url
                    data: {id:data.item.id},
                    success: function (result) {
                        console.log(result);//打印服务端返回的数据(调试用)
                        if (result.success>0) {
                            layer.msg('操作成功', {
                                btnAlign: 'c',
                                time: 3000, //20s后自动关闭
                                btn: ['确定']
                            });
                            treeTable.render(re);
                        }else{
                            layer.msg('操作失败', {
                                btnAlign: 'c',
                                time: 3000, //20s后自动关闭
                                btn: ['确定']
                            });
                        }
                    },
                    error : function() {
                        alert("异常！");
                    }
                });
                layer.close(index);
            });
        });
        // 刷新重载树表（一般在异步处理数据后刷新显示）
        o('.refresh').click(function(){
            re.data.push({"id":50,"pid":0,"title":"1-4"},{"id":51,"pid":50,"title":"1-4-1"});
            treeTable.render(re);
        })
    })
</script>
</body>
</html>
